import React, {useState, useEffect, useCallback, useMemo} from "react";

const Test = (props) => {
    let [num ,setNum] = useState(0);
    const handler = () => {
        setNum(num + 10);
        console.log(num);
    }

    useEffect(() =>{
        console.log(111,'componentDidMount');
    }, []);


    useEffect(() => {
        console.log('componentDidMount');
        return () => {
            console.log('componentWillUnmount');
        }
    });


    let total = useMemo(() => {
        return props.x + 100;
    })



    // 每次组件重复渲染的时候，该方法都要重复进行，浪费性能！
const computeResult = useMemo(() => {
    let sum = 0;
    // 模拟需要花费时间的大量计算
    for(let i = 0; i < 10000; i++) {
        sum += i;
    }
    
    console.log('进行了大量计算');
    return sum;
  })

    return <>
        <p>total: {total}</p>
        num:{num}
        <p></p>

        computeResult:{computeResult}
       <button onClick={handler}>累加</button>
    </>
}

export default Test;
